<template>
  <div class="bar">
      <router-link class="rl bch" active-class="ach" to="/index"></router-link>
      <router-link class="rl bcc" active-class="acc" to="/sort"></router-link>
      <router-link class="rl bcs" active-class="acs" to="/shopping"></router-link>
      <router-link class="rl bcm" active-class="acm" to="/mine"></router-link>
     <div class="goodsnumber" v-if="this.$store.state.ishavegood" :class="{donghua:this.$store.state.donghua}">
           <span>{{this.$store.state.allnumber}}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'mynav'
}
</script>

<style scoped>
    .bar {
        width:100%;
        height: 70px;
        background-color: #fff;
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 100;
        box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, .6);
        display: flex;
    }

    .rl {
        display: block;
        flex:1;
        width: 25%;
        height:70px;
    }

    .bch {
        background: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png') no-repeat center ;
        background-size: 70px;
    }

    .bcc {
        background: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png') no-repeat center ;
        background-size: 70px;
    }

    .bcs {
        background: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png') no-repeat center ;
        background-size: 70px;
    }

    .bcm {
        background: url('../assets/nav5.png') no-repeat center ;
        background-size: 70px;
    }

    .ach {
        background-image: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png');
    }

    .acc {
        background-image: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png');
    }

    .acs {
        background-image: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png');
    }

    .acm {
        background-image: url('https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/47480/36/12929/3209/5d9c4b13E97caa63a/4dc0ec8a7e47c2b7.png');
    }
    .goodsnumber {
        float: right;
        text-align: center;
        background-color: #EC5D29;
        border-radius: 15px;
        width: 30px;
        height: 19px;
        font-size: 14px;
        position: fixed;
        bottom: 46px;
        right: 110px;
        color: white;
        z-index: 10;
    }
</style>